// ============================================================================
// Layouts,
// some of the code extracted from Bootstrap 4.
// ============================================================================

// stylelint-disable-begin at-rule-no-vendor-prefix
@-ms-viewport { width: device-width; } 
// stylelint-disable-end at-rule-no-vendor-prefix

html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint);

    // ------------------------------------------------------------------------
    // Container (aka. border layout)
    //
    // The idea is different from Swing's Border Layout. It divides the content
    // for 5 parts: the header, footer, sidebars and the main area.
    //
    //    +--------------------------------+
    //    |             header             |
    //    +-------+----------------+-------+
    //    |       |                |       |
    //    | aside |      main      | aside |
    //    |       |                |       |
    //    +-------+----------------+-------+
    //    |             footer             |
    //    +--------------------------------+
    //
    // If `.container` applies to `main` directly, the header and footer will 
    // be omitted.
    // ------------------------------------------------------------------------

    .container {
      display: flex;
      flex-direction: column;
      align-items: stretch;

      > header, > footer {
        flex: 0;
      }

      // main ought to be unique in a page, so `.main` is also defined to imitate 
      // the same meaning too.
      > main, > .main {
        display: flex;
        align-items: stretch;
        flex: 1;
        overflow: auto;
      }
    }

    main.container, .main.container {
      flex-direction: row;
    }

    // defines the over style of sidebar.
    main.container, .container > main, .container .main {
      position: relative;

      // by default, the descendents will occupy the main area, except for aside.
      > * {
        flex: 1;
      }

      > aside {
        flex: 0;

        &.over {
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }

    // ------------------------------------------------------------------------
    // Columns (aka. 24-unit Grids)
    //
    // It divides the layout into 24 unit columns. It's a simplified version of 
    // the well-established Bootstrap 4's grid layout (just the flex part).
    // More info at https://v4.bootcss.com/docs/4.0/layout/grid/.
    // ------------------------------------------------------------------------

    .cols {
      display: flex;
      align-items: stretch;
      flex-wrap: wrap;
      margin-right: ($column-gutter / -2);
      margin-left: ($column-gutter / -2);
    }

    .col#{$infix} {
      flex: 1 1 0;
      max-width: 100%;
    }

    @for $i from 1 through $columns {
      .col#{$infix}-#{$i} {
        flex: 0 0 percentage($i / $columns);
        max-width: percentage($i / $columns);
      }

      .col, .col#{$infix}-#{$i} {
        width: 100%;
        min-height: 1px; // Prevent collapsing
        padding-right: ($column-gutter / 2);
        padding-left: ($column-gutter / 2);
      }
    }

    .col#{$infix}-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none; // Reset earlier grid tiers
    }

    @for $i from 0 through ($columns - 1) {
      @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
        .col-off#{$infix}-#{$i} {
          $num: $i / $columns;
          margin-left: if($num == 0, 0, percentage($num));
        }
      }
    }

    // ------------------------------------------------------------------------
    // Presentation (aka. Jumbotron)
    //
    //    +------------------+
    //    |                  |
    //    |   +----------+   |
    //    |   |   main   |   |
    //    |   +----------+   |
    //    |                  |
    //    +------------------+
    //
    // It's a screen that only have one elements centered. The concept is from
    // common presentation, the jumbotron or advantisement. It's main idea is 
    // to attract people in a smart way.
    // ------------------------------------------------------------------------

    .presentation {
      display: flex;
      align-items: center;
      justify-content: center;

      &.l {
        justify-content: flex-start;
      }

      &.r {
        justify-content: flex-end;
      }

      &.t {
        align-items: flex-start;
      }

      &.b {
        align-items: flex-end;
      }

      > main, > .main {
        flex: 0;
      }
    }

    // ------------------------------------------------------------------------
    // Tabbed (aka. Jumbotron)
    //
    //    +-------+-------+--------+
    //    | Tab 1 | Tab 2 |        |
    //    +----- -+-------+--------+
    //    |                        |
    //    |    Tab Content         |
    //    |                        |
    //    +------------------------+
    //
    // TODO.
    // ------------------------------------------------------------------------
  }
}
